<template>
  <article class="about" id="content">
    <h3>{{ word }}</h3>
    <p>{{ text }}</p>
    <button @click="showEdit">编辑词条</button>
    <section v-if="edit_text">
      <TextEdit :word="this.word" :content="this.text"/>
    </section>
  </article>
</template>

<script>
import axios from "axios";
import TextEdit from "@/components/TextEdit.vue";
import "@/assets/css/index.css";
// import Edit from "../components/Edit.vue";

export default {
  name: 'Content',
  components: { TextEdit },
  data() {
    return {
      text:'',
      word : this.$route.query.word,
      edit_text:false
    }
  },
  methods: {
    getData() {
      var that = this;  //缓存组件指针
      // 实例化axios请求
      const requireA = axios.create({
        baseURL: "",
      });
      requireA({
        url: "/apiWord/"+that.word,
        method:'GET'
      }).catch(function (error) {
        if (error.response) {
          // 请求已发出，但服务器响应的状态码不在 2xx 范围内
          // console.log(error.response.data);
          console.log('数据请求失败',error.response.status);
          // console.log(error.response.headers);
        } else {
          console.log('Error', error.message);
        }
        console.log(error.config);
      }).then((res) => {
        if (res) {
          console.log(res, "res", isNaN(res));
          var data = res['data']
          this.text = data[1];
          // var cate_list = res["data"]['cate_list'];
          console.log('页面获取成功')
        }else{
          window.alert('内容获取失败')
        }
        
      });
    },
    showEdit(){
      this.edit_text = !this.edit_text;
    }
  },
  created() {
    this.getData();
  },
};

</script>

<style scoped>
/* #categroy1{
  display: grid;
  width:300px;height:300px;
  overflow: scroll;
  overflow: auto;
  overflow-x: scroll;
  overflow-y: scroll;
} */
#menu>div{
  min-width: 140px;
  border-left: 1px solid greenyellow;
  border-right: 1px  solid greenyellow;
  padding: 0 5px 0 5px;
  margin: 0 auto;
}
#menu{
  display: flex;
  width: auto;
  overflow: auto;
}
.first_level_node{
  text-align: center;
  min-width: 100px;
}
.first_level_node>li{
  text-indent: -20%;
}
</style>